<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="在线支付"
    ></van-nav-bar>
    <!-- 在线支付个人信息 -->
    <div>
      <van-cell-group>
        <van-cell title="姓名" :value="name" />
        <van-cell title="订单编号" :value="orderForm" />
        <van-cell title="准驾车型" :value="type" />
        <van-cell title="班型" :value="banks" />
        <div class="online-payment">
          <div>支付金额</div>
          <p>
            {{ money }}
            <span>元</span>
          </p>
        </div>
      </van-cell-group>

      <!-- 支付方式 -->
      <div class="traing-record">支付方式</div>
      <div class="op-way">
        <img
          :class="{ chencked: (index = n) }"
          @click="inquire(index)"
          class="op-img"
          v-for="(item, index) in images"
          :key="index"
          :src="item.img"
          alt
        />
      </div>

      <div class="btn-primary">
        <van-button type="primary" @click="primary" round block
          >确认支付</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { OrderForm, payment } from "../../assets/js/api/user";
import { AllBanks } from "../../assets/js/api/apply";
export default {
  name: "OnlinePayment",
  data() {
    return {
      n: 0,
      images: [
        {
          img: require("../../assets/images/opline/wx.gif")
        },
        {
          img: require("../../assets/images/opline/zfb.gif")
        },
        {
          img: require("../../assets/images/opline/gs.gif")
        },
        {
          img: require("../../assets/images/opline/jh.gif")
        },
        {
          img: require("../../assets/images/opline/nl.gif")
        },
        {
          img: require("../../assets/images/opline/yl.gif")
        },
        {
          img: require("../../assets/images/opline/yz.gif")
        },
        {
          img: require("../../assets/images/opline/zgyh.gif")
        },
        {
          img: require("../../assets/images/opline/zs.gif")
        },
        {
          img: require("../../assets/images/opline/ztyl.gif")
        }
      ],

      banks: "", // 车型
      name: "", // 姓名
      orderForm: "", //订单编号
      type: "", // 准驾车型
      money: "" // 支付金额
    };
  },

  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });

    OrderForm().then(res => {
      // console.log(res);
      this.name = res.data.name;
      this.orderForm = res.data.orderCode;
      this.type = res.data.bmcx;
      this.money = res.data.mony;

      AllBanks(res.data.jgbh, this.type).then(res => {
        // console.log(res);
        this.banks = res.data[0].stageName;
      });
    });
  },

  methods: {
    // 支付缴费
    primary() {
      payment().then(res => {
        if (res.code == 0) {
          Dialog.alert({
            message: "缴费成功，请及时到报名驾校，办理面签手续"
          }).then(() => {
            // on close
            this.$router.go(-1);
          });
          // Toast.success("请及时到报名驾校，办理面签手续");
        }
        if (res.code == 509) {
          Dialog.confirm({
            message: "您还未实名认证，是否去实名认证"
          })
            .then(() => {
              // on confirm
              this.$router.push({ path: "/IdentityAuthentication" });
            })
            .catch(() => {
              // on cancel
              console.log("取消");
            });
        }
      });
    },

    inquire(index) {
      this.n = index;
    },

    onClickLeft() {
      this.$router.go(-1);
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>

<style></style>
